<template>
	<view class="beijing1" style="position: relative">
		<u-navbar :placeholder="true" title="宴席预定" @rightClick="rightClick" :autoBack="true" bg-color="transparent"></u-navbar>
		<image src="/static/beitu.png" mode="" style="position: absolute; z-index: 0; top: 0; width: 100vw; height: 100vh"></image>
		<view class="" style="margin-top: 20rpx">
			<u-swiper radius="0rpx" keyName="image" :list="list1" height="450rpx" indicator indicatorMode="dot"></u-swiper>
		</view>
		<view class="" style="padding: 0 25rpx; position: relative; z-index: 1; margin-top: -60rpx">
			<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 30rpx">
				<view class="flex">
					<view class="" style="width: 6rpx; height: 30rpx; background: #8c1608; border-radius: 3rpx; margin-left: -30rpx"></view>
					<text style="font-weight: 400; font-size: 30rpx; color: #11130b; margin-left: 30rpx">选择日期</text>
				</view>
				<view class="flex1" style="margin-top: 30rpx">
					<scroll-view scroll-x class="" style="width: 80%;white-space: nowrap;" :scroll-into-view="scrollId">
						<view class="xun" v-for="(item, index) in dateList" :key="index" style="display: inline-block" :id="`dateScroll${index}`">
							<view class="column center wei" style="" :class="{ xvan: a == index }" @click="xvan(index, item)">
								<view class="" style="">{{ item.week_str }}</view>
								<view class="" style="">{{ item.date_str }}</view>
							</view>
						</view>
					</scroll-view>
					<view class="flex" style="width: 20%" @click="open">
						<view class="" style="padding: 0 20rpx">
							<view class="" style="width: 2rpx; height: 76rpx; background: #8c1608"></view>
						</view>
						<text style="font-weight: 400; font-size: 30rpx; color: #11130b">全部 日期</text>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding: 0 25rpx; position: relative; z-index: 1; margin-top: 20rpx">
			<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 30rpx">
				<view class="flex">
					<view class="" style="width: 6rpx; height: 30rpx; background: #8c1608; border-radius: 3rpx; margin-left: -30rpx"></view>
					<text style="font-weight: 400; font-size: 30rpx; color: #11130b; margin-left: 30rpx">选择场次</text>
				</view>
				<view class="" style="height: 40rpx"></view>
				<view class="xun" style="" v-for="(item, index) in changlist" :key="index">
					<view class="flex1">
						<image :src="img + item.image" mode="" style="width: 130rpx; height: 130rpx; border-radius: 10rpx"></image>
						<view class="column between1" style="margin-left: 25rpx; width: 100%">
							<text style="font-weight: 400; font-size: 28rpx; color: #11130b">{{ item.title }}</text>
							<view class="flex1">
								<view class="" style="background: #fef5ea; border-radius: 18rpx">
									<text style="font-weight: 400; font-size: 22rpx; color: #f4a134; padding: 10rpx">开宴时间：{{ item.time_str }}</text>
								</view>
							</view>
							<view class="flex1" style="justify-content: flex-end" @click="yv(item)">
								<view class="center" style="width: 140rpx; height: 50rpx; background: #8c1608; border-radius: 25rpx">
									<text style="font-weight: 400; font-size: 24rpx; color: #ffffff; line-height: 0">立即预定</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex1" style="margin-top: 30rpx">
						<text style="font-weight: 400; font-size: 24rpx; color: #11130b">剩余座席：{{item.left_seat}}</text>
						<text style="font-weight: 400; font-size: 24rpx; color: #11130b; margin-left: 98rpx">剩余包厢：{{item.left_box}}</text>
					</view>
					<view class="" style="padding: 40rpx 0">
						<u-line></u-line>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 110rpx"></view>
		<view class="" style="position: fixed; bottom: 0; width: 100%; z-index: 1">
			<view class="" style="padding: 0 25rpx">
				<view class="between">
					<view class="center column" @click="xieyi('culture')">
						<image src="/pagesA/static/sbi.png" mode="" style="width: 116rpx; height: 27rpx"></image>
						<view class="center" style="width: 201rpx; height: 61rpx; background: #8c1608; border-radius: 30rpx">
							<text style="font-weight: 400; font-size: 26rpx; color: #ffffff">赵都礼宴</text>
						</view>
					</view>
					<view class="center column" @click="xieyi('feast_des')">
						<image src="/pagesA/static/sbi.png" mode="" style="width: 116rpx; height: 27rpx"></image>
						<view class="center" style="width: 201rpx; height: 61rpx; background: #8c1608; border-radius: 30rpx">
							<text style="font-weight: 400; font-size: 26rpx; color: #ffffff">餐宴介绍</text>
						</view>
					</view>
					<view class="center column" @click="xieyi('photography')">
						<image src="/pagesA/static/sbi.png" mode="" style="width: 116rpx; height: 27rpx"></image>
						<view class="center" style="width: 201rpx; height: 61rpx; background: #8c1608; border-radius: 30rpx">
							<text style="font-weight: 400; font-size: 26rpx; color: #ffffff">妆造摄影</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: env(safe-area-inset-bottom)"></view>
		</view>
		<uv-calendars
			:startDate="startDate"
			:endDate="endDate"
			:selected="selected"
			color="#8C1608"
			title="日期选择"
			ref="calendars"
			@confirm="confirm"
			confirmText="12"
			@close="close"
		/>
		<u-popup :show="show" mode="center" round="10rpx" :safeAreaInsetBottom="false">
			<view style="background: #f0e9dc; border-radius: 15rpx; width: calc(100vw - 50rpx); height: 1000rpx; position: relative">
				<view class="" style="padding: 50rpx 40rpx">
					<view class="center" style="position: relative">
						<text style="font-weight: 400; font-size: 33rpx; color: #222222">预订须知</text>
						<view class="" style="position: absolute; right: 0; top: 0" @click="xha">
							<text style="font-weight: 400; font-size: 40px; color: #222222; line-height: 0">×</text>
						</view>
					</view>
					<scroll-view scroll-y style="font-weight: 400; font-size: 26rpx; color: #222222; margin-top: 30rpx;height: 735rpx;position: relative;z-index: 9">
						<u-parse :content="state.xieyi.book_notice"></u-parse>
					</scroll-view>
				</view>
				<view class="" style="position: absolute; bottom: 0; right: 0">
					<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
				</view>
				<view class="" style="position: absolute; bottom: 40rpx; left: 40rpx" v-if="show">
					<button class="center bb" @click="tong" :disabled="dis">
						<view class="flex" style="">
							<view class="">我已阅读并同意此协议（</view>
							<u-count-down :time="3000" format="ss" @finish="finish"></u-count-down>
							<view class="">秒）</view>
						</view>
					</button>
				</view>
			</view>
		</u-popup>
		<view class="" style="position: fixed; bottom: 0; right: 0">
			<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
		</view>
	</view>
</template>

<script>
import { commoncommongetBannerList, feastcategorygetList } from '../../untils/api.js';
export default {
	data() {
		return {
			list1: [],
			dateList: [],
			dateRange: 7,
			a: 0,
			startDate: '',
			endDate: '',
			show: false,
			content: '',
			dis: true,
			time_str: '',
			changlist: [],
			category_id: '',
			title: '',
			scrollId:''
		};
	},
	onLoad(ops) {
		this.init();
		this.qcommoncommongetBannerList();
	},
	onShow() {},
	onReady() {},
	methods: {
		xieyi(zhi) {
			uni.navigateTo({
				url: `/pagesB/xieyi/xieyi?zhi=${zhi}`
			});
		},
		async qfeastcategorygetList() {
			const data = await feastcategorygetList({
				time_str: this.time_str
			});
			this.changlist = data.data;
		},
		async qcommoncommongetBannerList() {
			const data = await commoncommongetBannerList({
				flag: 'seat'
			});
			this.list1 = data.data;
			this.list1.forEach((item) => {
				item.image = this.img + item.image;
			});
		},
		xha() {
			this.dis = true;
			this.show = false;
		},
		finish() {
			this.dis = false;
		},
		tong() {
			this.dis = true;
			this.show = false;
			uni.navigateTo({
				url: `/pagesA/xvanzuo/xvanzuo?id=${this.category_id}&time_str=${this.time_str}&title=${this.title}`
			});
		},
		yv(item) {
			this.title = item.title;
			this.category_id = item.id;
			this.$store.commit('cyanxi', item);
			this.show = true;
		},
		close() {
			this.$refs.calendars.close();
		},
		open() {
			this.$refs.calendars.open();
		},
		confirm(e) {
			let m = this.dateList.findIndex((item) => item.date == e.date);
			if (m != -1) {
				this.a = m;
			} else {
				this.a = 10;
			}
			console.log(e);
			this.time_str = e.fulldate;
			this.dateList.forEach(item => {
				if(item.fulldate == e.fulldate){
					this.scrollId = `dateScroll${item.id}`
				}
			})
			this.qfeastcategorygetList();
		},
		xvan(e, item) {
			this.a = e;
			this.time_str = item.year + '-' + item.date_str;
			this.qfeastcategorygetList();
		},
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			console.log('leftClick');
		},
		scrolltolower() {
			console.log('到底了');
		},
		init() {
			const dateInstance = new Date();
			const dateList = [];
			for (var i = 0; i < this.dateRange; i++) {
				dateList.push({
					...this.getDateObjec(this.getNextSomeDay(dateInstance, i)),
					id:i
				});
			}
			console.log(dateList);
			this.dateList = dateList;
			this.startDate = this.dateList[0].year + '-' + this.dateList[0].date_str;
			this.endDate = this.dateList[this.dateList.length - 1].year + '-' + this.dateList[this.dateList.length - 1].date_str;
			console.log(this.endDate)
			this.time_str = this.dateList[0].year + '-' + this.dateList[0].date_str;
			this.qfeastcategorygetList();
			console.log(this.dateList);
		},
		getNextSomeDay(date, num) {
			const nextDay = new Date(date);
			nextDay.setDate(nextDay.getDate() + num);
			return nextDay;
		},
		getDateObjec(_date) {
			const dateInstance = _date ? new Date(_date) : new Date();
			const year = dateInstance.getFullYear();
			const month = dateInstance.getMonth() + 1;
			const date = dateInstance.getDate();
			const day = dateInstance.getDay();
			const hour = dateInstance.getHours();
			const dateStr = `${this.fillZero(month)}-${this.fillZero(date)}`;
			const weekStr = this.getWeekStr(day);
			const fulldate = `${this.fillZero(year)}-${this.fillZero(month)}-${this.fillZero(date)}`;
			return {
				date_str: dateStr,
				date,
				hour,
				year,
				week_str: '周' + weekStr,
				fulldate:fulldate
			};
		},
		fillZero(num) {
			if (num < 10) {
				return '0' + num;
			}
			return num;
		},
		getWeekStr(week) {
			let week_str = '';
			switch (week) {
				case 0:
					week_str = '日';
					break;
				case 1:
					week_str = '一';
					break;
				case 2:
					week_str = '二';
					break;
				case 3:
					week_str = '三';
					break;
				case 4:
					week_str = '四';
					break;
				case 5:
					week_str = '五';
					break;
				case 6:
					week_str = '六';
					break;
			}
			return week_str;
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
	font-weight: 400 !important;
	font-size: 17px !important;
}
.bb {
	width: 620rpx;
	height: 90rpx;
	background: #8c1608;
	border-radius: 45rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 0;
}
.wei {
	width: 106rpx;
	height: 106rpx;
	background: #ffffff;
	border-radius: 5rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #11130b;
}
.xvan {
	background: #8c1608 !important;
	color: #ffffff !important;
}
.sl1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.sl2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}
.beijing {
	overflow: hidden;
	padding: 0 25rpx;
}
.beijing1 {
	min-height: 100vh;
	background-color: #f0e8dc;
	//系统tabbar不要加注释掉
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
</style>
